<template>
  <!-- 组委会信息 -->
  <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="主办单位" prop="ocOrganizer">
          <el-input v-model="form.ocOrganizer" placeholder="多个单位之间用,隔开" /></el-form-item>
        <el-form-item label="承办单位" prop="ocDeptName">
          <el-input v-model="form.ocDeptName" placeholder="多个单位之间用,隔开" /></el-form-item>
        <el-form-item label="支持单位" prop="ocSupportor">
          <el-input v-model="form.ocSupportor" placeholder="多个单位之间用,隔开" /></el-form-item>
        <el-form-item label="协办单位" prop="ocToDeptName">
          <el-input v-model="form.ocToDeptName" placeholder="多个单位之间用,隔开" /></el-form-item>
        <el-form-item label="运营单位" prop="operatingUnit ">
          <el-input v-model="form.operatingUnit" placeholder="多个单位之间用,隔开" /></el-form-item>
        <el-form-item label="组委会联系电话" prop="ocTelno">
          <el-input v-model="form.ocTelno" placeholder="多个电话之间用,隔开" /></el-form-item>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-button type="primary" @click="upStep(id)">上一步</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button type="primary" @click="nextStep(id)">下一步</el-button>
    </el-row>
  </el-form>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getCurrentInstance } from "@vue/runtime-core";
import { editCommittee, editApi } from "@/api/match/league.js";
const router = useRouter();
const route = useRoute();
const id = ref();
const leagueId = ref();
const emit = defineEmits(["nextStep"]);
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const flag = ref(false);

const { proxy } = getCurrentInstance();

const data = reactive({
  // rules: {
  //   ocDeptName: {
  //     required: true,
  //     message: "请输入承办单位名称",
  //     trigger: "blur",
  //   },
  //   ocOrganizer: {
  //     required: true,
  //     message: "请输入主半单位名称",
  //     trigger: "blur",
  //   },
  //   ocSupportor: {
  //     required: true,
  //     message: "请输入协办单位名称",
  //     trigger: "blur",
  //   },
  //   ocTelno: {
  //     required: true,
  //     message: "请输入手机号",
  //     trigger: "blur",
  //   },
  //   ocToDeptName: {
  //     required: true,
  //     message: "请输入场馆名称",
  //     trigger: "blur",
  //   },
  // },
  form: {},
});
const { rules, form } = toRefs(data);
if (props.id) {
  initData();
}
async function initData() {
  form.value.id = props.id;
  let res = await editApi(form.value);
  form.value = res.data;
}

function submitForm() {
  return new Promise((resolve, reject) => {
    proxy.$refs["formRef"].validate(async (valid) => {
      if (valid) {
        form.value.id = props.id;
        let res = await editCommittee(form.value);
        id.value = res.data;
        if (res.code == 200) {
          flag.value = true;
          leagueId.value = res.data;
          proxy.$modal.msgSuccess("保存成功");
          console.log(res);
        } else {
          proxy.$modal.msgError("保存失败");
        }
      } else {
        proxy.$modal.msgError("请完善信息");
      }
      if (flag.value) {
        resolve("成功");
      } else {
        reject("失败");
      }
    });
  });
}

// 下一步
async function nextStep() {



  if (flag.value) {
    if (route.query.id) {
      router.push({
        path: "/match/leagueParticulars",
        query: {
          id: props.id,
        },
      });
      return;
    } else {
      router.push({
        path: "/match/addList",
        query: {
          leagueId: leagueId.value,
        },
      });
    }


  } else {
    await submitForm();
    if (route.query.id) {
      router.push({
        path: "/match/leagueParticulars",
        query: {
          id: props.id,
        },
      });
      return;
    } else {
      if (leagueId.value) {
        router.push({
          path: "/match/addList",
          query: {
            leagueId: leagueId.value,
          },
        });
      }
    }

  }
}

async function upStep() {
  if (flag.value) {
    emit("nextStep", 0, id.value);
  } else {
    await submitForm();
    if (flag.value) emit("nextStep", 0, id.value);
  }
}
</script>

<style scoped>
.tdFlex {
  display: flex;
}

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}
</style>
